(function () {
    var paper,
        midObj = {},
        winHt,
        winWt,
        tablePaddingRight = 20,
        gridCacheDict = {},
        progressTimeHandle,
        timeHandle,
        loopTimeSpan = 15000;

    $(function () {
        winHt = $(window).height() - 6;
        winWt = $(window).width();
        showClock();
        initLayout();
    });

    var getDateStr = function (num) {
        var d = new Date,
            yyyy = d.getFullYear() + '',
            mm = d.getMonth() + 1,
            dd = d.getDate();
        mm = mm < 10 ? '0' + mm : mm;
        if (num) {
            // 无所谓得出的日期格式是否为正确：比如日期为32。
            dd = dd + num;
        }
        dd = dd < 10 ? '0' + dd : dd;
        return yyyy + mm + dd;
    };
    var getTimeStr = function () {
        var d = new Date,
            HH = d.getHours(),
            mm = d.getMinutes();
        HH = HH < 10 ? '0' + HH : HH;
        mm = mm < 10 ? '0' + mm : mm;
        return '' + HH + mm;
    };
    var getShiftNum = function () {
        var num,
            todayDateStr = getDateStr(),
            todayTimeVal = parseInt(todayDateStr + getTimeStr()),
            tomorrowDateStr = getDateStr(1),
            shift1Start = parseInt(todayDateStr + '0600'),
            shift1End = parseInt(todayDateStr + '1430'),
            shift2Start = parseInt(todayDateStr + '1430'),
            shift2End = parseInt(todayDateStr + '2300'),
            shift3Start = parseInt(todayDateStr + '2300'),
            shift3End = parseInt(tomorrowDateStr + '0600');
        if (todayTimeVal >= shift1Start && todayTimeVal < shift1End) {
            num = 1;
        }
        else if (todayTimeVal >= shift2Start && todayTimeVal < shift2End) {
            num = 2;
        }
        else if (todayTimeVal >= shift3Start && todayTimeVal < shift3End) {
            num = 3;
        }
        return num;
    };

    var legDict = {
        'production end': {color: '#000'},
        'cleaning scheduled': {color: '#ddd9c4', text: ['cleaning', 'scheduled']},
        'maintanance scheduled': {color: '#a6a6a6', text: ['maintanance', 'scheduled']},
        'sample production': {color: '#006600', text: ['sample', 'production']},
        'testproduction': {color: '#009900'},
        'setting': {color: '#8db4e2'},
        'entrance empty': {color: '#e6b8b7'},
        'outlet occupied': {color: '#60497a'},
        'manpower shortage': {color: '#963634', text: ['manpower', 'shortage']},
        'metal deficiency': {color: '#632523'},
        'error production': {color: '#a50021'},
        'error maintenance': {color: '#cc0066', text: ['error', 'maintenance']},
        'error tool shop': {color: '#ff3300'},
        'error dosing furnace': {color: '#9900cc', text: ['error dosing', 'furnace']},
        'core shortage': {color: '#cc99ff'},
        'conveyor': {color: '#ffff00'},
        'furnace filling / change': {color: '#0000ff', text: ['furnace filling', '/ change']},
        'production': {color: '#00ff00'},
        'system failure': {color: '#ff0000'}
    };
    var gridRowNum = 2,
        gridColNum = 2,
        grid_data_arr = [{
            'name': 'B38A'
        }, {
            'name': 'B38B'
        }, {
            'name': 'B48A'
        }, {
            'name': 'B48B'
        }];
    var envDict = {
        'LP11': {
            graphData: [{
                x: 240,
                y: 438,
                width: 75,
                height: 60
            }, {
                x: 240,
                y: 453,
                width: 75,
                attr: {
                    'text-anchor': 'middle'
                }
            }, {
                x: 240,
                y: 485,
                width: 75,
                attr: {
                    fill: '#f00',
                    'text-anchor': 'middle'
                }
            }]
        },
        'LP12': {
            graphData: [{
                x: 240,
                y: 560,
                width: 75,
                height: 60
            }, {
                x: 240,
                y: 575,
                width: 75,
                attr: {
                    'text-anchor': 'middle'
                }
            }, {
                x: 240,
                y: 607,
                width: 75,
                attr: {
                    fill: '#f00',
                    'text-anchor': 'middle'
                }
            }]
        },
        'LP13': {
            graphData: [{
                x: 240,
                y: 699,
                width: 75,
                height: 60
            }, {
                x: 240,
                y: 714,
                width: 75,
                attr: {
                    'text-anchor': 'middle'
                }
            }, {
                x: 240,
                y: 746,
                width: 75,
                attr: {
                    fill: '#f00',
                    'text-anchor': 'middle'
                }
            }]
        },
        'LP14': {
            graphData: [{
                x: 240,
                y: 820,
                width: 75,
                height: 60
            }, {
                x: 240,
                y: 835,
                width: 75,
                attr: {
                    'text-anchor': 'middle'
                }
            }, {
                x: 240,
                y: 867,
                width: 75,
                attr: {
                    fill: '#f00',
                    'text-anchor': 'middle'
                }
            }]
        },
        'LP15': {
            graphData: [{
                x: 240,
                y: 958,
                width: 75,
                height: 60
            }, {
                x: 240,
                y: 973,
                width: 75,
                attr: {
                    'text-anchor': 'middle'
                }
            }, {
                x: 240,
                y: 1005,
                width: 75,
                attr: {
                    fill: '#f00',
                    'text-anchor': 'middle'
                }
            }]
        },
        'LP16': {
            graphData: [{
                x: 240,
                y: 1080,
                width: 75,
                height: 60
            }, {
                x: 240,
                y: 1095,
                width: 75,
                attr: {
                    'text-anchor': 'middle'
                }
            }, {
                x: 240,
                y: 1127,
                width: 75,
                attr: {
                    fill: '#f00',
                    'text-anchor': 'middle'
                }
            }]
        },
        'LP21': {
            graphData: [{
                x: 700,
                y: 438,
                width: 75,
                height: 60
            }, {
                x: 700,
                y: 453,
                width: 75,
                attr: {
                    'text-anchor': 'middle'
                }
            }, {
                x: 700,
                y: 485,
                width: 75,
                attr: {
                    fill: '#f00',
                    'text-anchor': 'middle'
                }
            }]
        },
        'LP22': {
            graphData: [{
                x: 700,
                y: 560,
                width: 75,
                height: 60
            }, {
                x: 700,
                y: 575,
                width: 75,
                attr: {
                    'text-anchor': 'middle'
                }
            }, {
                x: 700,
                y: 607,
                width: 75,
                attr: {
                    fill: '#f00',
                    'text-anchor': 'middle'
                }
            }]
        },
        'LP23': {
            graphData: [{
                x: 700,
                y: 699,
                width: 75,
                height: 60
            }, {
                x: 700,
                y: 714,
                width: 75,
                attr: {
                    'text-anchor': 'middle'
                }
            }, {
                x: 700,
                y: 746,
                width: 75,
                attr: {
                    fill: '#f00',
                    'text-anchor': 'middle'
                }
            }]
        },
        'LP24': {
            graphData: [{
                x: 700,
                y: 820,
                width: 75,
                height: 60
            }, {
                x: 700,
                y: 835,
                width: 75,
                attr: {
                    'text-anchor': 'middle'
                }
            }, {
                x: 700,
                y: 867,
                width: 75,
                attr: {
                    fill: '#f00',
                    'text-anchor': 'middle'
                }
            }]
        },
        'LP25': {
            graphData: [{
                x: 700,
                y: 958,
                width: 75,
                height: 60
            }, {
                x: 700,
                y: 973,
                width: 75,
                attr: {
                    'text-anchor': 'middle'
                }
            }, {
                x: 700,
                y: 1005,
                width: 75,
                attr: {
                    fill: '#f00',
                    'text-anchor': 'middle'
                }
            }]
        },
        'LP26': {
            graphData: [{
                x: 700,
                y: 1080,
                width: 75,
                height: 60
            }, {
                x: 700,
                y: 1095,
                width: 75,
                attr: {
                    'text-anchor': 'middle'
                }
            }, {
                x: 700,
                y: 1127,
                width: 75,
                attr: {
                    fill: '#f00',
                    'text-anchor': 'middle'
                }
            }]
        },
        'LP31': {
            graphData: [{
                x: 1157,
                y: 438,
                width: 75,
                height: 60
            }, {
                x: 1157,
                y: 453,
                width: 75,
                attr: {
                    'text-anchor': 'middle'
                }
            }, {
                x: 1157,
                y: 485,
                width: 75,
                attr: {
                    fill: '#f00',
                    'text-anchor': 'middle'
                }
            }]
        },
        'LP32': {
            graphData: [{
                x: 1157,
                y: 560,
                width: 75,
                height: 60
            }, {
                x: 1157,
                y: 575,
                width: 75,
                attr: {
                    'text-anchor': 'middle'
                }
            }, {
                x: 1157,
                y: 607,
                width: 75,
                attr: {
                    fill: '#f00',
                    'text-anchor': 'middle'
                }
            }]
        },
        'LP33': {
            graphData: [{
                x: 1157,
                y: 699,
                width: 75,
                height: 60
            }, {
                x: 1157,
                y: 714,
                width: 75,
                attr: {
                    'text-anchor': 'middle'
                }
            }, {
                x: 1157,
                y: 746,
                width: 75,
                attr: {
                    fill: '#f00',
                    'text-anchor': 'middle'
                }
            }]
        }
    };

    var redrawGridDynamicContent = function (shiftDict) {
        var shiftNum = getShiftNum();
        if(shiftDict === undefined) {
            shiftDict = [{'1': 0, '2': 0, '3': 0}, {'1': 0, '2': 0, '3': 0}, {'1': 0, '2': 0, '3': 0}, {'1': 0, '2': 0, '3': 0}];
        }

        $.each(gridCacheDict, function (k, v) {
            var tmpObj = grid_data_arr[k];
            tmpObj['CastingCurrent'] = tmpObj['CastingCurrent'] || 0;
            tmpObj['CastingForecast'] = tmpObj['CastingForecast'] || 0;
            tmpObj['CastingTarget'] = tmpObj['CastingTarget'] || 0;

            shiftDict[k][shiftNum] = tmpObj['CastingCurrent'] - tmpObj['CastingPlanned'];

            tmpObj['EndcontrolTarget'] = shiftDict[k][1];
            tmpObj['EndcontrolCurrent'] = shiftDict[k][2];
            tmpObj['EndcontrolForecast'] = shiftDict[k][3];
            tmpObj['EndcontrolPlanned'] = shiftDict[k][1] + shiftDict[k][2] + shiftDict[k][3];
            tmpObj['Yesterday'] = shiftDict[k]['yesterday'];
            if (tmpObj['Yesterday'] < 0) {
                v['Yesterday']['attr']['fill'] = '#f00'
            }
            else {
                v['Yesterday']['attr']['fill'] = '#0f0'
            }
            tmpObj['Last_Week'] = shiftDict[k]['last_week'];
            if (tmpObj['Last_Week'] < 0) {
                v['Last_Week']['attr']['fill'] = '#f00'
            }
            else {
                v['Last_Week']['attr']['fill'] = '#0f0'
            }
            if (tmpObj['CastingCurrent'] < tmpObj['CastingPlanned']) {
                v['CastingCurrent']['attr']['fill'] = '#f00'
            }
            else {
                v['CastingCurrent']['attr']['fill'] = '#0f0'
            }
            //if (tmpObj['EndcontrolCurrent'] < tmpObj['EndcontrolPlanned']) {
            //    v['EndcontrolCurrent']['attr']['fill'] = '#f00'
            //}
            //else {
            //    v['EndcontrolCurrent']['attr']['fill'] = '#0f0'
            //}
            if (tmpObj['CastingForecast'] < tmpObj['CastingTarget']) {
                v['CastingForecast']['attr']['fill'] = '#f00'
            }
            else {
                v['CastingForecast']['attr']['fill'] = '#0f0'
            }
            //if (tmpObj['EndcontrolForecast'] < tmpObj['EndcontrolTarget']) {
            //    v['EndcontrolForecast']['attr']['fill'] = '#f00'
            //}
            //else {
            //    v['EndcontrolForecast']['attr']['fill'] = '#0f0'
            //}
            if (tmpObj['EndcontrolTarget'] < 0) {
                v['EndcontrolTarget']['attr']['fill'] = '#f00'
            }
            else {
                v['EndcontrolTarget']['attr']['fill'] = '#0f0'
            }
            if (tmpObj['EndcontrolCurrent'] < 0) {
                v['EndcontrolCurrent']['attr']['fill'] = '#f00'
            }
            else {
                v['EndcontrolCurrent']['attr']['fill'] = '#0f0'
            }
            if (tmpObj['EndcontrolForecast'] < 0) {
                v['EndcontrolForecast']['attr']['fill'] = '#f00'
            }
            else {
                v['EndcontrolForecast']['attr']['fill'] = '#0f0'
            }
            if (tmpObj['EndcontrolPlanned'] < 0) {
                v['EndcontrolPlanned']['attr']['fill'] = '#f00'
            }
            else {
                v['EndcontrolPlanned']['attr']['fill'] = '#0f0'
            }
            $.each(v, function (i, o) {
                o.text = tmpObj[i] || 0;
                if (o.handle.attr('text') == '-' && o.text > 0) { // 初始数字增长动画
                    var cnt = 0;
                    var th = setInterval(function () {
                        o.handle.attr('text', cnt + '');
                        if (cnt >= o.text) {
                            o.handle.attr(o.attr);
                            clearInterval(th);
                        }
                        var step = 10;
                        if (o.text - cnt >= step) {
                            cnt = cnt + step;
                        }
                        else {
                            cnt = o.text;
                        }
                    }, 10);
                }
                else {
                    o.handle.attr('text', o.text).attr(o.attr);
                }
            });
        });
    };

    // 一些不需要经常改变的图形
    var drawLazyGraph = function () {
        // 温度不需要显示
//            $.each(graphInfoList, function (k, v) {
//                drawInfoLayer(v);
//            });
        $.each(envDict, function (k, v) {
            if (v && v['graphData']) {
                var arr = v['graphData'];
                if (arr && arr.length == 3) {
                    arr[0]['color'] = v.color;
                    arr[0]['product'] = v.product;
                    arr[1]['text'] = v['total'] || 0;
                    arr[2]['text'] = v['damage'] || 0;
                    drawInfoLayer(arr);
                }
            }
        });
    };

    var $progressStrip = $('#progressStrip'),
        progressStripWt = $progressStrip.width(),
        $pBar = $progressStrip.find('.bar'),
        incWt = parseInt((1000 / (loopTimeSpan - 1000)) * progressStripWt * 100) / 100; // 增长百分比

    var initEnvData = function () {
        clearInterval(progressTimeHandle);
        $pBar.removeClass('linear-increase').css('width', '0');
        progressTimeHandle = setInterval(function () {
            if ($pBar.hasClass('linear-increase') === false) {
                $pBar.addClass('linear-increase')
            }
            var curProBarWt = parseInt($pBar.width()),
                newProBarWt = incWt + curProBarWt + 'px';
            $pBar.css('width', newProBarWt);
        }, 1000);
        $.ajax({
            url: '/NEP/ALS/api/environment_data?timestamp=' + Date.now(),
            dataType: 'json',
            success: function (resp) {
                if (resp) {
                    if (resp.data) {
                        var lpState = resp['lp_state'];
                        var midSto = {};
                        $.each(resp.data, function (idx, o) {
                            var akz = o['akz'];
                            if (envDict[akz] != undefined) {
                                if (midSto[akz] === undefined) {
                                    midSto[akz] = {}
                                }
                                var tmpObj = midSto[akz];
                                if (tmpObj['total'] === undefined) {
                                    tmpObj['total'] = 0;
                                }
                                if (tmpObj['damage'] === undefined) {
                                    tmpObj['damage'] = 0;
                                }
                                tmpObj['total'] += parseInt(o['cnt']);
                                if (o['statusid'] != 1) {
                                    tmpObj['damage'] = parseInt(o['cnt']);
                                }
                            }
                        });
                        $.each(envDict, function (k, v) {
                            v['total'] = (midSto[k] && midSto[k]['total']) ? midSto[k]['total'] : 0;
                            v['damage'] = (midSto[k] && midSto[k]['damage']) ? midSto[k]['damage'] : 0;
                            if (lpState[k]) {
                                var ste = lpState[k]['state'].toLocaleLowerCase();
                                v['state'] = ste;
                                v['product'] = lpState[k]['product'];
                                if (legDict[ste]) {
                                    v['color'] = legDict[ste]['color'];
                                }
                            }
                        });
                        drawLazyGraph();
                    }
                    if (resp['api_data']) {
                        var grid_data_dict = {};
                        $.each(resp['api_data'], function (k, v) {
                            grid_data_dict[v.Type] = v;
                        });
                        $.each(grid_data_arr, function (k, v) {
                            $.extend(v, grid_data_dict[v.name])
                        });
                        redrawGridDynamicContent(resp['deviation_data']);
                    }
                }
            }
        });
    };

    var getImgSize = function (url, callFn) {
        $('<img/>').attr('src', url).load(function () {
            callFn.call(this);
        });
    };

    var initLayout = function () {
        paper = Raphael('stage', winWt, winHt);
        var titleBarHt = midObj.titleBarHt = 30;
        getImgSize(pImg, function () {
            var img = this;
            var imgWt = midObj.imgWt = img.width,
                imgHt = midObj.imgHt = img.height;
            var scaleImgHt = midObj.scaleImgHt = winHt - titleBarHt,
                imgWHScale = midObj.imgWHScale = imgWt / imgHt,
                scaleImgWt = midObj.scaleImgWt = parseInt(scaleImgHt * imgWHScale);
            midObj.imgObj = paper.image(pImg, 0, titleBarHt, scaleImgWt, scaleImgHt);
            drawTitle();
            calcBoardSize();
            drawLegend();
        });
    };

    var calcBoardSize = function () {
        midObj.boardXAxis = midObj.scaleImgWt; // board 起始x坐标
        midObj.boardYAxis = midObj.titleBarHt; // board 起始y坐标

        midObj.boardWt = winWt - midObj.boardXAxis;
        midObj.boardHt = winHt - midObj.titleBarHt;

        midObj.boardGrid = [];
        midObj.boardGapWt = calcScaleSize(16);
        midObj.boardGapHt = calcScaleSize(16);
        midObj.boardGridItemWt = (midObj.boardWt - gridColNum * midObj.boardGapWt) / gridColNum;
        midObj.boardGridItemHt = (midObj.boardHt - (gridRowNum - 1) * midObj.boardGapHt) / gridRowNum;

        for (var i = 0; i < gridRowNum; i++) {
            for (var j = 0; j < gridColNum; j++) {
                drawGrid(i, j);
            }
        }
    };

    var drawGrid = function (i, j) {
        var gridItem = {},
            gridItemRowNum = 6,
            gridItemColNum = 4;
        var idx = gridRowNum * i + j,
            dataHandle = grid_data_arr[idx];
        gridItem.x = midObj.boardXAxis + j * midObj.boardGridItemWt + midObj.boardGapWt * (j + 1);// *0.5，是为了给board加padding
        gridItem.y = midObj.boardYAxis + i * midObj.boardGridItemHt + midObj.boardGapHt * (i);
        paper.rect(gridItem.x, gridItem.y, midObj.boardGridItemWt, midObj.boardGridItemHt).attr('fill', '#000');
        var rowHt = midObj.boardGridItemHt / gridItemRowNum,
            colWt = midObj.boardGridItemWt / gridItemColNum,
            shortRowHt = rowHt * 0.75;
        var captionFontSize = calcScaleSize(rowHt - 8);

        paper.text(gridItem.x + midObj.boardGridItemWt * 0.5, gridItem.y + 0.5 * rowHt, 'Casting Type ' + dataHandle['name']).attr({
            'text-anchor': 'middle',
            'font-size': captionFontSize,
            'font-weight': 900,
            'fill': '#0f0'
        });

        // 画表格线
        var tmpY = gridItem.y + rowHt,
            pathString = 'M' + gridItem.x + ' ' + tmpY + 'L' + (gridItem.x + midObj.boardGridItemWt) + ' ' + tmpY; // 第一横行
        paper.path(pathString).attr({
            stroke: '#00ff00',
            'stroke-width': 3
        });
        tmpY += shortRowHt;
        pathString = 'M' + gridItem.x + ' ' + tmpY + 'L' + (gridItem.x + midObj.boardGridItemWt) + ' ' + tmpY; // 第二横行
        paper.path(pathString).attr({
            stroke: '#00ff00',
            'stroke-width': 2
        });
        var tmpX = gridItem.x + colWt * 2;
        tmpY = gridItem.y + rowHt;
        pathString = 'M' + tmpX + ' ' + tmpY + 'L' + tmpX + ' ' + (tmpY + shortRowHt); // 第 1 竖线
        paper.path(pathString).attr({
            stroke: '#00ff00',
            'stroke-width': 2
        });
        rowHt = (midObj.boardGridItemHt - shortRowHt) / (gridItemRowNum - 1); // 重新计算行高
        tmpY = tmpY + shortRowHt;
        pathString = 'M' + tmpX + ' ' + (tmpY + calcScaleSize(2)) + 'L' + tmpX + ' ' + (tmpY + rowHt); // 第 2 竖线
        paper.path(pathString).attr({
            stroke: '#00ff00',
            'stroke-width': 2
        });
        tmpY = tmpY + rowHt;
        pathString = 'M' + tmpX + ' ' + (tmpY + calcScaleSize(2)) + 'L' + tmpX + ' ' + (tmpY + rowHt); // 第 3 竖线
        paper.path(pathString).attr({
            stroke: '#00ff00',
            'stroke-width': 2
        });
        tmpY = tmpY + rowHt;
        pathString = 'M' + tmpX + ' ' + (tmpY + calcScaleSize(2)) + 'L' + tmpX + ' ' + (tmpY + rowHt); // 第 4 竖线
        paper.path(pathString).attr({
            stroke: '#00ff00',
            'stroke-width': 2
        });
        tmpY = tmpY + rowHt;
        pathString = 'M' + tmpX + ' ' + (tmpY + calcScaleSize(2)) + 'L' + tmpX + ' ' + (tmpY + rowHt); // 第 5 竖线
        paper.path(pathString).attr({
            stroke: '#00ff00',
            'stroke-width': 2
        });

        var ftSize = captionFontSize * 0.7,
            shortRowPadding = calcScaleSize(8),
            prodValFtSize = captionFontSize;
        tmpY = gridItem.y + rowHt + 0.5 * shortRowHt;
        paper.text(gridItem.x + colWt + shortRowPadding, tmpY, 'Status').attr({
            'text-anchor': 'middle',
            'font-size': ftSize,
            'font-weight': 700,
            'fill': '#0f0'
        });
        ftSize = captionFontSize * 0.7;
        tmpY = gridItem.y + rowHt + 0.5 * shortRowHt;
        paper.text(gridItem.x + 3 * colWt + shortRowPadding, tmpY, 'Deviation').attr({
            'text-anchor': 'middle',
            'font-size': ftSize,
            'font-weight': 700,
            'fill': '#0f0'
        });
        var ftSize = colWt / 6;
        tmpY = gridItem.y + 1.5 * rowHt + shortRowHt;
        paper.text(gridItem.x + colWt + 12, tmpY, 'Target:').attr({
            'text-anchor': 'end',
            'font-size': ftSize,
            'font-weight': 900,
            'fill': '#0f0'
        });

        var oTmp = gridCacheDict[idx] = {};
        oTmp['CastingTarget'] = {
            x: gridItem.x + 2 * colWt - calcScaleSize(tablePaddingRight),
            y: tmpY,
            attr: {
                'text-anchor': 'end',
                'font-size': prodValFtSize,
                'font-weight': 900,
                'fill': '#0f0'
            }
        };
        oTmp['CastingTarget']['handle'] = paper.text(gridItem.x + 2 * colWt - calcScaleSize(tablePaddingRight), tmpY, '-').attr(oTmp['CastingTarget']['attr']);

        tmpY -= (0.15 * rowHt);
        oTmp['EndcontrolTarget'] = {
            x: gridItem.x + 3 * colWt - calcScaleSize(tablePaddingRight),
            y: tmpY,
            attr: {
                'text-anchor': 'end',
                'font-size': prodValFtSize,
                'font-weight': 900,
                'fill': '#0f0'
            }
        };
        paper.text(gridItem.x + 3 * colWt + 25, tmpY, 'First Shift:').attr({
            'text-anchor': 'end',
            'font-size': ftSize,
            'font-weight': 900,
            'fill': '#0f0'
        });
        oTmp['EndcontrolTarget']['handle'] = paper.text(gridItem.x + 4 * colWt - calcScaleSize(tablePaddingRight), tmpY, '-').attr(oTmp['EndcontrolTarget']['attr']);
        tmpY = gridItem.y + 2.5 * rowHt + shortRowHt;
        ftSize = colWt / 6;
        paper.text(gridItem.x + colWt + 12, tmpY, 'Current:').attr({
            'text-anchor': 'end',
            'font-size': ftSize,
            'font-weight': 900,
            'fill': '#0f0'
        });
        oTmp['CastingCurrent'] = {
            x: gridItem.x + 2 * colWt - calcScaleSize(tablePaddingRight),
            y: tmpY,
            attr: {
                'text-anchor': 'end',
                'font-size': prodValFtSize,
                'font-weight': 900,
                'fill': '#0f0'
            }
        };
        oTmp['CastingCurrent']['handle'] = paper.text(gridItem.x + 2 * colWt - calcScaleSize(tablePaddingRight), tmpY, '-').attr(oTmp['CastingCurrent']['attr']);
        tmpY -= (0.6 * rowHt) ;
        paper.text(gridItem.x + 3 * colWt + 25, tmpY, 'Second Shift:').attr({
            'text-anchor': 'end',
            'font-size': ftSize,
            'font-weight': 900,
            'fill': '#0f0'
        });
        oTmp['EndcontrolCurrent'] = {
            x: gridItem.x + 3 * colWt - calcScaleSize(tablePaddingRight),
            y: tmpY,
            attr: {
                'text-anchor': 'end',
                'font-size': prodValFtSize,
                'font-weight': 900,
                'fill': '#0f0'
            }
        };
        oTmp['EndcontrolCurrent']['handle'] = paper.text(gridItem.x + 4 * colWt - calcScaleSize(tablePaddingRight), tmpY, '-').attr(oTmp['EndcontrolCurrent']['attr']);
        tmpY = gridItem.y + 3.5 * rowHt + shortRowHt;
        paper.text(gridItem.x + colWt + 12, tmpY, 'Forecast:').attr({
            'text-anchor': 'end',
            'font-size': ftSize,
            'font-weight': 900,
            'fill': '#0f0'
        });

        oTmp['CastingForecast'] = {
            x: gridItem.x + 2 * colWt - calcScaleSize(tablePaddingRight),
            y: tmpY,
            attr: {
                'text-anchor': 'end',
                'font-size': prodValFtSize,
                'font-weight': 900,
                'fill': '#0f0'
            }
        };
        oTmp['CastingForecast']['handle'] = paper.text(gridItem.x + 2 * colWt - calcScaleSize(tablePaddingRight), tmpY, '-').attr(oTmp['CastingForecast']['attr']);
        tmpY -= (0.85 * rowHt);
        paper.text(gridItem.x + 3 * colWt + 25, tmpY, 'Third Shift:').attr({
            'text-anchor': 'end',
            'font-size': ftSize,
            'font-weight': 900,
            'fill': '#0f0'
        });
        oTmp['EndcontrolForecast'] = {
            x: gridItem.x + 3 * colWt - calcScaleSize(tablePaddingRight),
            y: tmpY,
            attr: {
                'text-anchor': 'end',
                'font-size': prodValFtSize,
                'font-weight': 900,
                'fill': '#0f0'
            }
        };
        oTmp['EndcontrolForecast']['handle'] = paper.text(gridItem.x + 4 * colWt - calcScaleSize(tablePaddingRight), tmpY, '-').attr(oTmp['EndcontrolForecast']['attr']);
        tmpY = gridItem.y + 4.5 * rowHt + shortRowHt;
        paper.text(gridItem.x + colWt + 12, tmpY, 'Planned:').attr({
            'text-anchor': 'end',
            'font-size': ftSize,
            'font-weight': 900,
            'fill': '#0f0'
        });
        oTmp['CastingPlanned'] = {
            x: gridItem.x + 2 * colWt - calcScaleSize(tablePaddingRight),
            y: tmpY,
            attr: {
                'text-anchor': 'end',
                'font-size': prodValFtSize,
                'font-weight': 900,
                'fill': '#0f0'
            }
        };
        oTmp['CastingPlanned']['handle'] = paper.text(gridItem.x + 2 * colWt - calcScaleSize(tablePaddingRight), tmpY, '-').attr(oTmp['CastingPlanned']['attr']);
        tmpY -= 1.1 * rowHt;
        paper.text(gridItem.x + 3 * colWt + 25, tmpY, 'Today:').attr({
            'text-anchor': 'end',
            'font-size': ftSize,
            'font-weight': 900,
            'fill': '#0f0'
        });
        oTmp['EndcontrolPlanned'] = {
            x: gridItem.x + 3 * colWt - calcScaleSize(tablePaddingRight),
            y: tmpY,
            attr: {
                'text-anchor': 'end',
                'font-size': prodValFtSize,
                'font-weight': 900,
                'fill': '#0f0'
            }
        };
        oTmp['EndcontrolPlanned']['handle'] = paper.text(gridItem.x + 4 * colWt - calcScaleSize(tablePaddingRight), tmpY, '-').attr(oTmp['EndcontrolPlanned']['attr']);
        tmpY += (0.65 * rowHt);
        paper.text(gridItem.x + 3 * colWt + 25, tmpY, 'Yesterday:').attr({
            'text-anchor': 'end',
            'font-size': ftSize,
            'font-weight': 900,
            'fill': '#0f0'
        });
        oTmp['Yesterday'] = {
            x: gridItem.x + 3 * colWt - calcScaleSize(tablePaddingRight),
            y: tmpY,
            attr: {
                'text-anchor': 'end',
                'font-size': prodValFtSize,
                'font-weight': 900,
                'fill': '#0f0'
            }
        };
        oTmp['Yesterday']['handle'] = paper.text(gridItem.x + 4 * colWt - calcScaleSize(tablePaddingRight), tmpY, '-').attr(oTmp['Yesterday']['attr']);

        tmpY += (0.65 * rowHt);
        paper.text(gridItem.x + 3 * colWt + 25, tmpY, 'Last Week:').attr({
            'text-anchor': 'end',
            'font-size': ftSize,
            'font-weight': 900,
            'fill': '#0f0'
        });
        oTmp['Last_Week'] = {
            x: gridItem.x + 3 * colWt - calcScaleSize(tablePaddingRight),
            y: tmpY,
            attr: {
                'text-anchor': 'end',
                'font-size': prodValFtSize,
                'font-weight': 900,
                'fill': '#0f0'
            }
        };
        oTmp['Last_Week']['handle'] = paper.text(gridItem.x + 4 * colWt - calcScaleSize(tablePaddingRight), tmpY, '-').attr(oTmp['Last_Week']['attr']);
    };

    var drawTitle = function () {
        var titBar = paper.rect(0, 0, winWt, midObj.titleBarHt);
        titBar.attr({
            'fill': '#0070c0',
            'stroke-width': 0
        });

        paper.text(12, 15, 'Foundry Casting Area').attr({
            'text-anchor': 'start',
            'font-size': 20,
            'font-weight': 900,
            'fill': '#fff'
        });

        var span1Wt = 440,
            span2Wt = 450,
            span3Wt = 340,
            titRectWt = 80,
            titRectHt = 24;
        var textY = midObj.titleBarHt + titRectHt * 0.5;
        midObj.imgZoomScale = midObj.scaleImgWt / midObj.imgWt;
        var text1X = calcScaleSize(span1Wt),
            text2X = calcScaleSize(span2Wt),
            text3X = calcScaleSize(span3Wt);

        paper.rect((text1X - titRectWt) * 0.5, midObj.titleBarHt, titRectWt, titRectHt).attr({
            fill: '#0070c0',
            stroke: '#0070c0'
        });

        paper.rect(text1X + (text2X - titRectWt) * 0.5, midObj.titleBarHt, titRectWt, titRectHt).attr({
            fill: '#0070c0',
            stroke: '#0070c0'
        });

        paper.rect(text1X + text2X + (text3X - titRectWt) * 0.5, midObj.titleBarHt, titRectWt, titRectHt).attr({
            fill: '#0070c0',
            stroke: '#0070c0'
        });

        paper.text(text1X * 0.5, textY, 'Line 1').attr({
            'text-anchor': 'middle',
            'font-size': 20,
            'font-weight': 900,
            'fill': '#fff'
        });

        paper.text(text1X + text2X * 0.5, textY, 'Line 2').attr({
            'text-anchor': 'middle',
            'font-size': 20,
            'font-weight': 900,
            'fill': '#fff'
        });

        paper.text(text1X + text2X + text3X * 0.5, textY, 'Line 3').attr({
            'text-anchor': 'middle',
            'font-size': 20,
            'font-weight': 900,
            'fill': '#fff'
        });

        initEnvData();
        timeHandle = setInterval(function () {
            initEnvData();
        }, loopTimeSpan);
    };

    var calcScaleSize = function (val) {
        var newVal = parseInt(val * midObj.imgZoomScale * 100) / 100;
        //if (window.devicePixelRatio) {
        //    newVal = newVal * window.devicePixelRatio;
        //}
        return newVal;
    };

    var clrRectWt,
        pdRectHt;
    // 画左侧LP11-LP33数据
    var drawInfoLayer = function (layerData) {
        if ($.isArray(layerData)) {
            $.each(layerData, function (idx, obj) {
                drawInfoLayer(obj);
            });
        }
        else if ($.isPlainObject(layerData) && layerData.x != undefined && layerData.y != undefined) {
            if (layerData.lock === undefined) {
                layerData.x = calcScaleSize(layerData.x);
                layerData.y = calcScaleSize(layerData.y) + midObj.titleBarHt;
                layerData.width = calcScaleSize(layerData.width);
                layerData.height = calcScaleSize(layerData.height);
            }
            if (layerData.text != undefined) {
                var opt = {
                    'text-anchor': 'start',
                    'font-size': 14,
                    'font-weight': 100,
                    'fill': '#fff'
                };
                if (layerData.lock === undefined) {
                    if (opt['text-anchor'] && layerData.width) {
                        layerData.x += 0.5 * layerData.width;
                    }
                }
                if (layerData.attr) {
                    $.extend(opt, layerData.attr);
                }
                if (layerData['handle']) {
                    layerData['handle'].attr('text', layerData.text);
                }
                else {
                    layerData['handle'] = paper.text(layerData.x, layerData.y, layerData.text).attr(opt);
                }
                layerData.lock = 1;
            }
            else if (layerData.width != undefined && layerData.height != undefined && layerData.lock === undefined) {
                var opt = {
                    'fill': '#333'
                };
                if (layerData.attr) {
                    $.extend(opt, layerData.attr);
                }

                paper.rect(layerData.x, layerData.y, layerData.width, layerData.height).attr(opt);

                clrRectWt = calcScaleSize(30);
                pdRectHt = calcScaleSize(40);
                layerData['color_handle'] = paper.rect(layerData.x - clrRectWt, layerData.y, clrRectWt, layerData.height).attr({
                    fill: layerData.color || '#fff'
                });

                paper.rect(layerData.x - clrRectWt, layerData.y - pdRectHt, (clrRectWt + layerData.width), pdRectHt).attr({
                    fill: '#fff'
                });

                layerData['product_handle'] = paper.text(layerData.x - clrRectWt + (clrRectWt + layerData.width) * 0.5, layerData.y - pdRectHt + pdRectHt * 0.5, '-').attr({
                    'text-anchor': 'middle',
                    fill: '#000',
                    'font-weight': 'bold'
                });

                var yAxis = layerData.y + layerData.height * 0.5;
                var pathString = 'M' + (layerData.x) + ' ' + yAxis + 'L' + (layerData.x + layerData.width) + ' ' + yAxis;

                paper.path(pathString).attr({
                    stroke: '#00ff00',
                    'stroke-width': 1
                });
                layerData.lock = 1;
            }
            if (layerData['color_handle'] && layerData.color) {
                layerData['color_handle'].attr('fill', layerData.color);
            }
            if (layerData['product_handle'] && layerData.product) {
                layerData['product_handle'].attr('text', layerData.product);
            }
        }
    };

    var drawLegend = function () {
        var rx = 801,
            ry = 792,
            wt = 30,
            ht = 30,
            itemWt = 451 * 0.5,
            itemHt = 487 / 10;
        wt = calcScaleSize(wt);
        ht = calcScaleSize(ht);
        var cnt = 0;
        $.each(legDict, function (k, v) {
            var rowNum = Math.floor(cnt / 2),
                colNum = cnt % 2;
            var x = calcScaleSize(rx + colNum * itemWt + 8),
                y = calcScaleSize(ry + rowNum * itemHt + 8) + midObj.titleBarHt;
            paper.rect(x, y, wt, ht).attr({
                fill: v.color
            });

            x += wt + calcScaleSize(8);
            y += calcScaleSize(7);
            if (v.text) {
                paper.text(x, y - 3, v.text[0]).attr({
                    'text-anchor': 'start',
                    'font-size': '12',
                    'font-weight': '200'
                });
                paper.text(x, y + 10, v.text[1]).attr({
                    'text-anchor': 'start',
                    'font-size': '12',
                    'font-weight': '200'
                });
            }
            else {
                paper.text(x, y + 4, k).attr({
                    'text-anchor': 'start',
                    'font-size': '12',
                    'font-weight': '200'
                });
            }
            cnt++;
        })
    };

    var showClock = function () {
        $('#neverClock').timeTo({
            fontSize: 18,
            theme: 'black'
        });
    }
})();